<template>
  <div class="mt-s-fishes">
    <ul class="mt-s-kinds">
      <li
        v-for="(cls, index) in classes"
        :key="index"
        :class="{active: currentClasses.id === cls.id}"
        @click="getSpecise(cls)">{{cls.name}}</li>
    </ul>
    <ul class="mt-s-species">
      <li 
       v-for="(s, index) in species"
       :key="index"
       :class="{active: fish.id === s.id}"
       @click="selectFish(s)">
        <span>{{s.name}}</span>
       </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classes: [],
      species: [],
      currentClasses: {
        id: 0,
        name: "全部鱼种"
      }
    }
  },
  props: {
    fish: {
      type: Object,
      default: {
        id: 0,
        name: "全部鱼种"
      }
    },
    whole: {
      type: Number,
      default: 1 //0: 不包含全部鱼种; 1: 包含全部鱼种
    }
  },
  async mounted() {
    await this.getFishes()
    if(this.whole) this.getSpecise(this.fish)
    else this.getSpecise(this.classes[getFirstKey(this.classes)])
  },
  methods: {
    async getFishes() {
      this.$emit("showLoading")
      if (this.whole)
        this.classes = await this.$store.dispatch("getFishesWithWhole")
      else this.classes = await this.$store.dispatch("getFishes")
      this.$emit("stopLoading")
      return
    },
    async getSpecise(c) {
      this.$emit("showLoading")
      this.currentClasses = c
      if (this.whole)
        this.species = await this.$store.dispatch("getSpeciseWithWhole", c.id)
      else {
        this.species = await this.$store.dispatch("getSpecise", c.id)
      }
      this.$emit("stopLoading")
      return
    },
    selectFish(s) {
      this.$emit("changeFish", s)
    }
  }
}

function getFirstKey(obj) {
  for( let key in obj ) {
    return key
  }
}
</script>

<style lang="scss">
.mt-s-fishes {
  & > .mt-s-kinds {
    flex: 3;
  }

  & > .mt-s-species {
    flex: 7;
    background-color: #f0f0f0;
  }
}
</style>
